import React from "react";
import classnames from "classnames";
import Modal from "rmc-dialog";
import { PropsTypePopup } from "./PropsType";
import "./index.less";
const Popup: React.FC<PropsTypePopup> = (props) => {
  const {
    visible,
    onClose,
    children,
    className,
    wrapClassName,
    type,
    position,
  } = props;
  const cls = classnames(className, {
    ["m-react-popup-slide-up"]: type === "slide-up",
    ["m-react-popup-right-up"]: type === "right-up",
    ["m-react-popup-left-up"]: type === "left-up",
    ["m-react-popup-top-up"]: type === "top-up",
  });
  const clsWrap = classnames(wrapClassName, {
    ["m-react-modal-wrap"]: true,
    ["m-react-modal-wrap-center"]: true,
  });
  let transition = "";
  if (type === "slide-up") {
    transition = "rmc-slide-up";
  } else if (type === "right-up") {
    transition = "rmc-right-up";
  } else if (type === "left-up") {
    transition = "rmc-left-up";
  } else if (type === "top-up") {
    transition = "rmc-top-up";
  }
  return (
    <div>
      <Modal
        visible={visible}
        onClose={onClose}
        closable={false}
        className={cls}
        wrapClassName={clsWrap}
        transitionName={transition}
      >
        {children}
      </Modal>
    </div>
  );
};
export default Popup;
